<template>
    <div><!--这里需要传一个 currentUser 参数  因为导航栏要使用，不传会报错-->
        <!--后面优化应该把用户信息写在组件里面，不然每个引用这个组件的页面都得自己定义这个currentUser js对象并从后台获取，代码重用率太低了-->
<!--        <top-nav v-bind:currentUser="currentUser"></top-nav>-->
        <top-nav @updateUser="setCurrentUser"></top-nav>

        <!--中间的页面主体-->
        <el-row type="flex" justify="space-around">
            <!--左边的搜索大部分-->
            <el-col :span="14" class="search_part">
                <!--搜索框-->
                <search-bar v-bind:word="searchWord"></search-bar>
                <!--搜索记录数说明 + 排序方法下拉框-->
                <el-row type="flex" class="font line_height_35" justify="space-between">
                    <el-col :span="7">共搜索到: {{totalRs}} 条符合条件的记录。</el-col>
                    <el-col :span="7">
                        <span>排序: </span>
                        <!--排序方式下拉框-->
                        <el-select v-model="sortType" placeholder="请选择" size="small" value="" @change="changeOption">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <el-divider content-position="left">搜索结果</el-divider>

                <!--搜索结果内容（包括分页在内）-->
                <el-row>
                    <!--搜索结果-->
                    <el-row type="flex" justify="end">
                        <el-col :span="22">
                            <div v-if="resultType === '1'">  <!--帖子-->
                                <!--设定自定义事件，在子组件中获取帖子总数后 触发事件并向父组件传值  修改结果总数-->
<!--                                <post-list ref="postList" @setTotal="setTotalRs" @updCurrentSize="setCurrentSize"></post-list>-->
                                <post-list ref="postList" @setTotal="setTotalRs"></post-list>
                            </div>
                            <div v-else-if="resultType === '2'"> <!--贴吧-->
                                <barList ref="searchBarList" @setTotal="setTotalRs"></barList>
<!--                                <strong>贴吧搜索结果</strong>-->
                            </div>
                            <div v-else-if="resultType === '3'"> <!--用户-->
                                <strong>用户搜索结果</strong>
                            </div>

<!--                            &lt;!&ndash;如果获取的当前分页的结果数量没到默认分页大小  则显示没有更多&ndash;&gt;-->
<!--                            <div v-if="currentSize < pageSize">-->
<!--                                <el-empty description="没有更多了.."></el-empty>-->
<!--                            </div>-->
                        </el-col>
                    </el-row>
<!--                    &lt;!&ndash;分页&ndash;&gt;-->
<!--                    <el-row class="margin_top_15 center">-->
<!--                        <el-col>-->
<!--                            <el-pagination-->
<!--                                    @current-change="changePage"-->
<!--                                    :current-page.sync="currentPage"-->
<!--                                    :page-size="pageSize"-->
<!--                                    layout="total, prev, pager, next, jumper"-->
<!--                                    :total="totalRs">-->
<!--                            </el-pagination>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
                </el-row>
            </el-col>

            <!--右边的“今日热议”模块-->
            <el-col :span="6" class="border" style="border-left: #f17008 2px dashed">
                这里是今日热议模块，<br>
                暂时先搁置
            </el-col>
        </el-row>

        <!--底部版权-->
        <el-row>
            <copyRight></copyRight>
        </el-row>

        <!--返回顶部   这里不传target的值（根据他源码是可以这么做，可以直接用的，虽然我看不大懂）  target要设置的化是外部容器，而且要有一定的css样式，可以看我edge收藏夹-->
        <el-backtop></el-backtop>
    </div>
</template>

<script>
    import navigateBar from "@/components/component/navigateBar";
    import btmCopyRight from "@/components/component/btmCopyRight";
    import searchBar from "@/components/component/searchBar";
    import indexPostList from "@/components/component/indexPostList";
    import barList from "@/components/component/barList";

    export default {
        name: "searchResultPage",
        data(){
            return{
                // currentUser: { /*当前用户*/
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     nickName: '',
                //     motto: '',
                //     role: '',
                // },
                currentUser: {}, /*当前用户*/
                sortType: "", // 默认按照 回复数 由多到少排序
                options: [],  // 排序方式下拉框数组
                resultType: 1, // 当前搜索结果的类型（1：帖子；2：贴吧；3：用户）默认为1  判断的时候其实还是 string类型
                searchWord: "", // 输入的搜索词
                pageSize: 10, // 搜索结果分页显示，每页显示多少条结果
                totalRs: 0, // 搜索结果总的条目数
                currentPage: 1, //当前页，默认为 1
                currentSize: 0, // 当前list（无论是帖子还是贴吧什么）当前（分）页的数量，初始化为0
            }
        },
        created(){ // 页面加载时执行，此时各节点还没有渲染好
            /*接收参数（搜索类型、搜索关键词）*/
            this.resultType = this.$route.query.type;
            this.searchWord = this.$route.query.searchWord;

            // 根据搜索类型初始化 排序方式下拉框 及其默认显示方式
            switch (this.resultType) {
                case "1": // 帖子
                    this.options.push({value: 'view', label: '按浏览量最多'});
                    this.options.push({value: 'reply', label: '按回复数最大'});
                    this.options.push({value: 'time', label: '发布时间最新'});

                    this.sortType = "reply";
                    break;
                case "2": // 贴吧
                    this.options.push({value: 'peopleNum', label: '加入人数最多'});
                    this.options.push({value: 'postsNum', label: '贴吧帖数最多'});

                    this.sortType = "postsNum";
                    break;
                case "3": // 用户
                    this.options.push({value: 'posts', label: '用户发帖最多'});
                    this.options.push({value: 'join', label: '加入贴吧最多'});

                    this.sortType = "posts";
                    break;
                default:
                    this.options.push({value: 'error', label: '初始化错误！'});
                    this.sortType = "error";
            }

            // /*初始化用户信息*/
            // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userGet).then(req=>{
            //     /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
            //     if (req.data !== ""){  /*从登陆过来的   session中有当前登录用户的相关信息  对页面进行初始化*/
            //         this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.headImg;
            //         this.currentUser.nickName = req.data.nickName;
            //         this.currentUser.motto = req.data.motto;
            //         this.currentUser.role = req.data.role;
            //     }
            // });

            // 根据搜索类型及默认条件访问后端进行搜索
        },
        mounted(){
            //获取结果记录总条数
            if (this.resultType === '1'){ // 帖子列表
                // 初始化搜索结果（帖子列表），默认取第一页，每页10条数据   true 表示做搜索操作  searchWord是搜索关键字
                this.$refs.postList.init(true, "reply", this.currentPage, this.pageSize, true, this.searchWord);
                // this.$refs.postList.getTotalNum();  // 括号一定要加
            }else if (this.resultType === '2'){ // 贴吧
                this.$refs.searchBarList.init(0, null, null, this.searchWord); // 剩下的参数 使用默认的参数 排序默认先按 帖子数排序
            }else if (this.resultType === '3'){  // 用户

            }
        },
        methods:{
            // 设置当前用户信息
            setCurrentUser(curUser){
                this.currentUser = curUser;
            },

            // 排序方式下拉框 改变时触发的钩子函数
            // 参数为： 目前的选中值 option对应的value
        changeOption(current){
            console.log("当前选中：" + current);

            // 根据搜索类型初始化 排序方式下拉框 及其默认显示方式
            switch (this.resultType) {
                case "1": // 帖子
                    this.$refs.postList.updateListWithSort(current);
                    break;
                case "2": // 贴吧
                    this.$refs.searchBarList.init(0, null, null, this.searchWord, current); // 还有一个参数（按照贴吧名称搜索）
                    break;
                case "3": // 用户
                    break;
                default:
            }
        },

            // // 点击页码触发   根据分页大小和 页码更新帖子列表
            // changePage(val){
            //     // console.log("当前页：" + val);
            //     // console.log(`当前页: ${val}`);  两者一样的  有python  內味了
            //     this.$refs.postList.updateListWithPage(val, this.pageSize);
            // },

            // 设置 结果总条目数
            setTotalRs(total){
                this.totalRs = total;
            },

            // 设置当前页 列表结果数
            // setCurrentSize(listSize){
            //     this.currentSize = listSize;
            //     console.log("当前页大小:" + this.currentSize);
            // },

            printWord(){
                console.log("我是搜索界面，word:" + this.searchWord);
            }
        },
        components:{
            "topNav": navigateBar,
            "searchBar": searchBar,
            "copyRight": btmCopyRight,
            "postList": indexPostList,
            "barList": barList,
        }
    }
</script>

<style scoped>
    /*页面的左边整体  包括搜索框\搜索结果\分页*/
    .search_part{
        background-color: rgb(255, 251, 246);
        padding-right: 20px;
        padding-bottom: 35px;
    }
</style>